<template>
  <div class="login" v-loading="pageLoading" :element-loading-text="pageLoadingText">
    <div class="box">
      <el-form label-width="90px">
        <el-form-item label="用户名：">
          <el-input v-model="name" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="pwd" type="text" clearable></el-input>
        </el-form-item>
        <div class="btn">
          <el-button @click="login()">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      pageLoading: false,
      pageLoadingText: "登录中...",
      name: "张三三",
      pwd: "123456"
    };
  },
  caeate() {},
  methods: {
    login() {
      localStorage.setItem("adminName", this.name);
      localStorage.setItem("adminDepartment", "兴业银行");
      localStorage.setItem("adminPosition", "大堂经理");
      this.$router.push({ path: "menus" });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/theme/theme";
.login {
  width: 100%;
  height: 100%;
  .box {
    width: 430px;
    height: 300px;
    box-sizing: border-box;
    margin: auto;
    padding: 20px 30px;
    padding-top: 50px;
    border: 1px solid @navIsActive;
    box-shadow: 3px 3px 5px @navIsActive;
    background: #ffffff;
    margin-top: 280px;
    .text {
      padding-left: 70px;
      font-size: 12px;
      span:first-child {
        padding-right: 20px;
      }
      .router-link-exact-active,
      .router-link-active,
      a {
        color: @navIsActive !important;
      }
    }
    .btn {
      padding: 20px 0;
      width: 100%;
      margin-top: 50px;
      .el-button {
        width: 100%;
        color: #ffffff;
        background-color: @navIsActive;
      }
    }
  }
}
</style>
